<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!--{include file='comm/header.tpl'}-->
    <title>用户列表</title>
    <!--{include file="comm/icheck.tpl"}-->
    <!--引用div做成的下拉框效果样式-->
    <link rel="stylesheet" href="/quanliadmin/docroot/css/department_select.css" type="text/css" media="screen" />

    <!--引用div做成的下拉框效果js-->
    <script language="JavaScript" src="/quanliadmin/docroot/js/department_select.js" type="text/javascript"></script>
</head>
<body>

<style>
    .imageSites{
        position: absolute;
        left:740px;
        top:16px;
    }
    .imageSite{
        position: absolute;
        left:280px;
        top:8px;
    }
</style>

<div class="container">

        <div class="comm_content">

            <div class="search-box">
                <div style="position:relative">
                    <form class="form-inline" onsubmit="return false;" id="search_form">
                        <table>
                            <tbody>
                            <tr>
                                <td style="height: 30px;">
                                    <span>用户名：<input type="text" class="form-control input-sm" style="width:148px" value="" name="userID" id="userID"></span>
                                </td>
                                <td style="height: 30px;">
                                    <span>用户姓名：<input type="text" class="form-control input-sm" style="width:148px" value="" name="trueName" id="trueName"></span>
                                </td>
                                <td style="height: 30px;">
                                    部门：
                                </td>
                                <td style="height: 30px;">
                                    <span>

                                        <div class="search_option">
                                            <div class="search_option_drop" >
                                                <span id="searchOptions">
                                                    请选择
                                                <font class="imageSites"><img src="/quanliadmin/docroot/images/comm/selects.jpg"></font>
                                                </span>
                                            </div>

                                            <ul class="search_option_panel"  id="searchPanels" style="display: none;z-index: 100;">
                                            <li class="childSelectImg" departmentID="" style="margin-top:5px;margin-bottom:5px;margin-left: 0px;font-size: 13px;" >请选择</li>
                                            <!--{$department_select_html}-->
                                            </ul>

                                        <input type="hidden" value="0" id="hdnSearchTypes" name="hdnSearchType">
                                        <input type="hidden" value="" id="search_departmentID" name="search_departmentID">
                                        <!--<input type="hidden" value="" id="departmentName" name="departmentName">-->
                                        </div>
                                    </span>
                                </td>
                                <td style="height: 30px;">
                                    <span>
                                            城市筛选：
                                          <select class="form-control w300" id="cityID" name="cityID">
                                              <option value="">请选择</option>
                                              <!--{foreach from=$city_array item=city}-->
                                                  <option value="<!--{$city.id}-->"><!--{$city.name}--></option>
                                              <!--{/foreach}-->
                                          </select>
                                    </span>
                                </td>
                                <td style="height: 30px;">
                                    <span><input type="button" onclick="user.search();" class="btn btn-primary" value="查询"></span>
                                </td>
                                <td style="height: 30px;">
                                    <span><input type="button" onclick="user.reSet();" class="btn btn-warning" value="重置"></span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>

            <table id="flex" style="display:none;"></table>

        </div>


</div>
<!--HTML OPEN-->
<div style="display:none">
    //区域添加
    <div id="pop" style="display:none">
        <div class="navigation" id="navigation" style="margin-bottom: 13px;">
            <ul class="nav nav-tabs">
                <li class="active" onclick="user.changed(this,'add_user');"><a href="#">用户信息</a></li>
                <li onclick="user.changed(this,'add_role');"><a href="#">用户角色</a></li>
            </ul>
        </div>
        <div id="select-content">
            <form id="userForm" class="form-horizontal" role="form" onsubmit="return false;">
                <input type="hidden" id="uuid" name="uuid" value="" />
                <div id="add_user">
                    <div class="form-group">
                        <label for="userId" class="col-sm-3 control-label"><span style="color:red;">*</span>&nbsp;用户名：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="userId" name="userID" placeholder="请输入用户名" style="width: 350px"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pop_trueName" class="col-sm-3 control-label"><span style="color:red;">*</span>&nbsp;用户姓名：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="pop_trueName" name="pop_trueName" placeholder="请输入用户姓名" style="width: 350px"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="userPwd" class="col-sm-3 control-label"><span style="color:red;">*</span>&nbsp;密码：</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="userPwd" name="userPwd" placeholder="请输入密码" style="width: 350px"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="repeatPwd" class="col-sm-3 control-label"><span style="color:red;">*</span>&nbsp;密码确认：</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="repeatPwd" name="repeatPwd" placeholder="请再次输入密码" style="width: 350px"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mobile" class="col-sm-3 control-label"><span style="color:red;">*</span>&nbsp;手机号码：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="请输入手机号码" style="width: 350px"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-3 control-label">&nbsp;email：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱地址" style="width: 350px"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="departmentID" class="col-sm-3 control-label">部门：</label>
                        <div class="col-sm-9">
                            <!--<select class="form-control" id="save_departmentID" name="save_departmentID" style="width: 350px">
                                <option value="0">请选择</option>
                                <!--$department_select_html}--
                            </select>-->
                            <div class="search_option">
                                <div class="search_option_drop" >
                                    <span id="searchOption"  style="display:block;line-height:30px;">
                                        <!--{if isset( $coupon_array ) && !empty($coupon_array.departmentName)}-->
                                            <!--{$coupon_array.departmentName}-->
                                        <!--{else}-->
                                            请选择
                                        <!--{/if}-->
                                        <font class="imageSite"><img src="/quanliadmin/docroot/images/comm/selects.jpg"></font>
                                    </span>
                                </div>

                                <ul class="search_option_panel"  id="searchPanel" style="display: none;z-index: 100">
                                    <li class="childSelectImg" departmentID="0" style="margin-top:5px;margin-bottom:5px;margin-left: 0px;font-size: 13px;" >请选择</li>
                                    <!--{$department_select_html}-->
                                </ul>

                                <input type="hidden" value="0" id="hdnSearchType" name="hdnSearchType">
                                <input type="hidden" value="" id="departmentID" name="departmentID">
                                <input type="hidden" value="" id="departmentName" name="departmentName">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label"> 是否销售员：</label>
                        <div class="col-sm-9">
                            <div class="fl" style="margin-right: 10px;">
                                <input type="radio" class="square-radio" id="isSalesman-radio-1" name="isSalesman" value="1" >
                                <label for="isSalesman-radio-1">是</label>
                            </div>
                            <div class="fl" style="margin-right: 10px;">
                                <input type="radio" class="square-radio" id="isSalesman-radio-0" name="isSalesman" value="0" checked>
                                <label for="isSalesman-radio-0">否</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">城市：</label>
                        <div class="col-sm-9">
                            <!--{foreach from=$city_array item=city}-->
                            <div class="fl" style="margin: 0px 10px 10px 0px;">
                                <input type="checkbox" class="square-radio" id="city-checkbox-<!--{$city.id}-->" name="cityID" value="<!--{$city.id}-->">
                                <label for="city-checkbox-<!--{$city.id}-->"><!--{$city.name}--></label>
                            </div>
                            <!--{/foreach}-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">配送站：</label>
                        <div class="col-sm-9" id="distribution">
                        </div>
                    </div>
                </div>
                <div id="add_role" class="hidden">
                    <!--{foreach from=$role_group_array item=group}-->
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><!--{$group.roleGroupName}--></label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label"></label>
                        <div class="col-sm-9">
                            <!--{foreach from=$group.role_list item=role_list}-->
                            <div class="fl" style="margin: 0px 10px 10px 0px;">
                                <input type="checkbox" class="square-radio" id="square-checkbox-<!--{$role_list.roleID}-->" name="user_role" value="<!--{$role_list.roleID}-->">
                                <label for="square-checkbox-<!--{$role_list.roleID}-->"><!--{$role_list.roleName}--></label>
                            </div>
                            <!--{/foreach}-->
                        </div>
                    </div>
                    <!--{/foreach}-->
                </div>
            </form>
        </div>
    </div>
</div>

<!--END HTML OPEN-->
<script type="text/javascript">

$(window).ready(function() {

    $("#roleGroupID").on("change", function() {

        var group_id = $(this).val();
        $("#roleID").find("option").show();
        if (group_id > 0) {
            $.each($("#roleID").find("option"), function(k, v) {
                if ($(v).attr("group") != group_id) {
                    $(v).hide();
                }
            });
        }

    });

});
$("#flex").flexigrid({
    url:"/invokingAjax-backend/system/userList.ajax?operFlg=1&xjx=none",
    dataType: "json",
    colModel : [
        <!--{if $edit_permission}-->
        {display: "操作", width : 120, align: 'center'},
        <!--{/if}-->
        {display: "用户名", width : 120},
        {display: "用户姓名", width : 120},
        {display: "手机号码", width : 180, align: 'center'},
        {display: "email", width : 180},
        {display: "部门", width : 180},
        {display: "是否销售员", width : 80, align: 'center'},
        {display: "城市", width : 180},
        {display: "配送站", width : 180},
        {display: "使用标志", width : 70, align: 'center'}
    ],
    <!--{if $edit_permission}-->
    buttons : [
        {name: "添加", bclass: "add", onpress : "user.edit"},
        {separator: true},
        {name: "删除", bclass: "delete", onpress : "user.del.check"},
        {separator: true},
        {name: "全选", bclass: "checkAll", onpress : "E.checkAllList"},
        {separator: true},
        {name: "取消全选", bclass: "cancelCheckAll", onpress : "E.cancelCheckAllList"}

    ],
    <!--{/if}-->
    sortname: "createTime",
    sortorder: "desc",
    usepager: true,
    rp: 10,
    useRp: true,
    showTableToggleBtn: true
});



var user = {

    operFlg:"",

    //查询
    search: function() {
        var dt = $('#search_form').serializeArray();
        $("#flex").flexOptions({newp: 1, params: dt}).flexReload();
    },

    //重置
    reSet:function(){
        $('#searchOptions').text('请选择');
        $("#userID").val('');
        $("#trueName").val('');
        $("#merchantName").val('');
        $("#search_departmentID").val('');
        $("#cityID").val('');
        this.search();

    },

    //清除
    clear: function(){
        $("#roleGroupID").val(0);
        $("#userID").val("");
        $("#roleID").html(0);
        $("#trueName").val('');
    },

    //编辑
    edit: function(userID) {
        this.userID = userID;
        this.operFlg = 1;
        if(userID){
            var url = '/invokingAjax-backend/system/userList.ajax?operFlg=2&userID='+userID;
        }else{
            var url =  '/invokingAjax-backend/system/userList.ajax?operFlg=2';
        }
        E.loadding.open('正在操作，请稍候...');
        E.ajax_post({
            url: url,
            //data: {},
            call: "user.open"
        });
    },

    open: function(o){

        E.loadding.close();

        var title = "用户修改";

        if(o.code == 404){
            title = "用户添加";
            this.addBox = 'add_user';
        }
        E.popup.open({
            id:"pop",   		 //获取id为"pop"元素内的HTML
            title: title,       //弹出层标题
            css: "width:800px;",     //设置弹出层样式
            btnName: "保存",         //执行“确定”操作的按钮名称
            btnCall:"user.check();"  //点击确定后执行的方法
        });
        $('.square-radio').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });

        if(user.operFlg == 2){
            $(".nav-tabs li:eq(1)").addClass("active");
            $(".nav-tabs li:eq(1)").siblings().removeClass("active");
            $("#add_user").addClass("hidden");
            $("#add_role").removeClass("hidden");
        }else{
            $(".nav-tabs li:eq(0)").addClass("active");
            $(".nav-tabs li:eq(0)").siblings().removeClass("active");
            $("#add_user").removeClass("hidden");
            $("#add_role").addClass("hidden");
        }

        if(o.code == 200){

            $('#uuid').val(o.data.uuid);
            $('#userId').val(o.data.userID).attr('disabled','disabled');
            $('#pop_trueName').val(o.data.trueName);
            $('#mobile').val(o.data.mobile);
            $('#email').val(o.data.email);
            $('#isSalesman-radio-'+ o.data.isSalesman).iCheck('check');
            $('#departmentID').val(o.data.departmentID);
            $('#userPwd').val('');

            if( o.data.departmentName ){
                var spanValues = o.data.departmentName + '<font class="imageSite"><img src="/quanliadmin/docroot/images/comm/selects.jpg"></font>';
            }else{
                var spanValues =  '请选择' + '<font class="imageSite"><img src="/quanliadmin/docroot/images/comm/selects.jpg"></font>';
            }

            $("#searchOption").html(spanValues);

            user.distribution = o.data.distribution;

            $.each(o.data.city, function(k, cityID) {

                $('#city-checkbox-' + cityID).iCheck('check');

            });

            $.each(o.data.user_role,function(key,role){
                $("#square-checkbox-"+role).iCheck('check');
            });

        } else {

            user.distribution = '';

        }

    },

    check: function(){
        this.dt = E.getFormValues("userForm");
        var msg = '';

        if (E.isEmpty(this.dt.userID)) {
            msg += "用户名不能为空<br>";
        }
        if (E.isEmpty(this.dt.pop_trueName)) {
            msg += "用户姓名不能为空<br>";
        }
        if (!this.userID || (this.userID && !E.isEmpty(this.dt.userPwd))) {
            //mod by allen.qiang 20140924 密码规则变为数字，字母，符号 start
            //if (!E.isPwd(this.dt.userPwd)) {
            if (!E.isPwd_A(this.dt.userPwd)) {
            //mod by allen.qiang 20140924 密码规则变为数字，字母，符号 end
                msg += "密码必须是6-30位字符，可使用字母、数字或符号的组合<br>";
            }
            if (this.dt.userPwd != this.dt.repeatPwd) {
                msg += "两次输入的密码不一致<br>";
            }
        }
        if (E.isEmpty(this.dt.mobile)) {
            msg += "手机号不能为空<br>";
        }else{
            if(!E.isMobile(this.dt.mobile)){
                msg += "手机号码格式错误<br>";
            }
        }
        if (this.dt.user_role.length == 0) {
            msg += "请选择用户角色<br>";
        }
        if (msg != "") {
            E.alert(msg);
        } else {
            E.confirm("您确认要保存用户信息吗？", "user.save");
        }
    },
    save: function() {

        E.popup.close();

        E.loadding.open("正在保存用户信息，请稍候...");
        E.ajax_post({
            url: "/invokingAjax-backend/system/userList.ajax?operFlg=100&act=edit&userID="+userID,
            data: this.dt,
            call: "user.result"
        })
    },
    result: function( o ) {

        if (o.code == 200) {
            E.alert(o.message, 2, "user.load");
        } else {
            E.alert(o.message);
        }
        E.loadding.close();
    },


    load: function(){
        $("#flex").flexReload();
    },

    //角色分配
    role: function( userID ) {
        this.userID = userID;
        this.operFlg = 2;
        var url = '/invokingAjax-backend/system/userList.ajax?operFlg=2&userID='+userID;
        E.loadding.open('正在操作，请稍候...');
        E.ajax_post({
            url: url,
            //data: {},
            call: "user.open"
        });
    },

    change: {

        userID: "",
        useFlg: "",

        test:function(){
            alert()
        },

        confirm: function(userID, useFlg) {
            this.userID = userID;
            this.useFlg = useFlg;
            if (useFlg == 0) {
                E.confirm("您确认要禁用该用户吗？", "user.change.execute");
            } else {
                E.confirm("您确认要启用该用户吗？", "user.change.execute");
            }
        },

        execute: function() {
            if (this.useFlg == 0) {
                E.loadding.open("正在禁用用户，请稍候...");
            } else {
                E.loadding.open("正在启用用户，请稍候...");
            }
            E.ajax_post({
                url: "/invokingAjax-backend/system/userList.ajax?operFlg=100&act=change",
                data: {
                    userID: this.userID,
                    useFlg: this.useFlg
                },
                call: "user.change.result"
            });
        },

        result: function( o ) {
            E.loadding.close();
            if (o.code == 200) {
                user.load();
                E.alert(o.message, 2);
            } else {
                E.alert(o.message);
            }
        }

    },

    del: {

        u_array: "",

        check: function() {

            //获取选中的行的行数
            if ($('.trSelected',flex).length == 0) {

                E.alert('请选择要删除的用户');

            } else {

                this.u_array = new Array();

                $.each($('.trSelected',flex), function(k, v) {
                    user.del.u_array.push($(v).attr("id").substr(3));
                });

                //弹出确认层
                E.confirm("您确认要删除选择的用户吗？", "user.del.execute");

            }

        },

        execute: function() {

            E.loadding.open("正在删除用户，请稍候...");
            E.ajax_post({
                url: "/invokingAjax-backend/system/userList.ajax?operFlg=100&act=del",
                data: {
                    user_arry: this.u_array
                },
                call: "user.del.result"
            });

        },

        result: function( o ) {
            E.loadding.close();
            if (o.code == 200) {
                user.load();
                E.alert(o.message, 2);
            } else {
                E.alert(o.message);
            }
        }

    },
    changed: function(ythis,boxID){

        this.addBox = boxID;

        $(ythis).addClass('active').siblings().removeClass('active');

        $('#'+boxID.toString()).removeClass('hidden').siblings().addClass('hidden');

    }

};

$(window).ready(function() {

    $(document).on('ifChecked', 'input[name=cityID]', function() {

        var cityID = $(this).attr('id').replace('city-checkbox-', '');

        E.ajax_get({
            url: '/invokingAjax-comm/bill/distribution.ajax?operFlg=4',
            data: {
                deliver_cityid: cityID
            },
            call: function( obj ) {

                if(obj.code ==200 && obj.data != null){

                    var distributionHtml = '<div id="distribution_box_' + cityID + '">';

                    $.each(obj.data, function(i,val){
                        distributionHtml +='<div class="fl" style="margin: 0px 10px 10px 0px;">';

                        if (E.inArray(val.distribution_id, user.distribution)) {
                            distributionHtml +='<input type="checkbox" class="square-radio" id="distribution-checkbox-'+val.distribution_id+'" name="distributionID" value="'+val.distribution_id+'" checked>';
                        } else {
                            distributionHtml +='<input type="checkbox" class="square-radio" id="distribution-checkbox-'+val.distribution_id+'" name="distributionID" value="'+val.distribution_id+'">';
                        }

                        distributionHtml +='<label for="distribution-checkbox-'+val.distribution_id+'" style="margin-left: 10px;">'+val.distribution_name+'</label>';
                        distributionHtml +='</div>';
                    });

                    distributionHtml += '</div>';

                    $('#distribution').append(distributionHtml);

                    $('.square-radio').iCheck({
                        checkboxClass: 'icheckbox_square-blue',
                        radioClass: 'iradio_square-blue',
                        increaseArea: '20%' // optional
                    });

                }

            }
        });

    });

    $(document).on('ifUnchecked', 'input[name=cityID]', function() {
        var cityID = $(this).attr('id').replace('city-checkbox-', '');
        $('#distribution_box_' + cityID).remove();
    });

});

</script>

</body>

</html>